<template>
  <!-- 判断登录后在显示评论表单 -->
  <div v-if="isLogin">
    <div style="display: flex; height: 100px; width: 100%; background-color: #f0f2f5">
      <div style="text-align: center; line-height: 50px; margin-left: 40%">
        <p>
          请登录后再进行评论<el-text
            class="mx-1"
            type="warning"
            size="large"
            @click="login"
            >登录</el-text
          >
        </p>
      </div>
    </div>
  </div>
  <div v-else>
    <a-list
      v-if="comments.length"
      :data-source="comments"
      :header="`${comments.length} ${comments.length > 1 ? 'replies' : 'reply'}`"
      item-layout="horizontal"
    >
      <template #renderItem="{ item }">
        <a-list-item>
          <a-comment
            :author="item.author"
            :avatar="item.avatar"
            :content="item.content"
          />
        </a-list-item>
      </template>
    </a-list>
    <a-comment>
      <template #avatar>
        <a-avatar
          src="https://p26-passport.byteacctimg.com/img/user-avatar/349270a573badebe73096ca0c5d88661~150x150.awebp"
          alt="默认头像"
        />
      </template>
      <template #content>
        <a-form-item>
          <a-textarea v-model:value="value" :rows="4" :placeholder="parentId ? '写下你的回复...' : '写下你的评论...'" />
        </a-form-item>
        <a-form-item>
          <a-button
            html-type="submit"
            :loading="submitting"
            type="primary"
            @click="handleSubmit"
          >
             {{ parentId ? '回复' : '评论' }}
          </a-button>
        </a-form-item>
      </template>
    </a-comment>
  </div>
  <LoginDialog v-model:dialog-visible="dialogFormVisible" />
</template>
<script lang="ts" setup>
import { ref, computed, watch, inject,defineEmits,defineProps } from "vue";
import LoginDialog from "@/components/login/LoginDialog.vue";
import { useAuthStore } from "@/stores/authStore";
import useUserIdStore from "@/stores/useUserId.js";
import request from "@/components/utiles/request.js";
import { useRoute } from "vue-router";
import { ElMessage } from "element-plus";
const route = useRoute();
const authStore = useAuthStore();
const userIdStore = useUserIdStore();
const dialogFormVisible = ref<boolean>(false);
const comments = ref([]);
const submitting = ref<boolean>(false);
const value = ref<string>("");
// const getCommentData = inject<()=>void>("getCommentData");
const emit = defineEmits(['submit-success'])
    
const isLogin = computed(() => {
  return !authStore.token ;
});
const props = defineProps<{
  articleId?: string 
  parentId?: number  // 接收父组件传递的 parentId
}>()


const handleSubmit = async () => {
  submitting.value = true;
  if (!value.value) {
    ElMessage({
      message: "评论内容不能为空",
      type: "warning",
    });
    submitting.value = false;
    return;
  }

  console.log(value.value);
  console.log(props.articleId);
  // console.log(route.params.articleId);
  console.log(props.parentId);
  const insertData = await request.post("/comment/insertComment", {
    content: value.value,
    userId: userIdStore.userId,
    articleId:props.articleId,
    parentId: props.parentId || null, // 使用父组件传递的 parentId
  });
  console.log(insertData.data);
  if (insertData.data.code === 200) {
    // 提交成功，清空输入框
    value.value = "";
    submitting.value = false;
    // 重新获取评论列表
    ElMessage({
      message: "评论成功",
      type: "success",
    });
    emit('submit-success');
    // 无感刷评论
    // getCommentData();
    console.log(value.value);
  }else {
    ElMessage({
      message: "评论失败",
      type: "error",
    });
    submitting.value = false;
    console.error("评论失败:", insertData.data);
  }
}
;
const login = async () => {
  // 登录逻辑
  console.log("登录");
  dialogFormVisible.value = true;
};
</script>
